window.onload = function() {
	var wrap=document.querySelector(".wrap"),
		rule_box=document.querySelector(".rule_box"),
		success_box = document.querySelector(".success_box"),
		fail_box = document.querySelector(".fail_box"),
		road = document.querySelector(".road"),
		index_run=document.querySelector(".run"),
		rule_start=document.querySelector(".rule_start"),
		car_position=document.querySelector(".car_position"),
		again_btn=document.querySelector(".again_btn"),
		train = document.querySelector("ul"),
		car = document.querySelector(".car"),
		box = document.querySelector(".box"),
		daojishi = document.querySelector(".daojishi"),
		left_button = document.querySelector(".left"),
		right_button = document.querySelector(".right"),
		later = document.querySelector(".later"),
		music=document.querySelector(".musicSwitch"),
		Audio=document.querySelector("#audio"),
		is_on = false,
		car2_position = [80, 210, 350, 500],
		car2, timer, timer2, timer3, index = 0,
		late_timer,
		late_index = 10,
		a = 0,
		b = 3,
		c, d, car2_left,
		easy = document.querySelector(".easy"),
		hard = document.querySelector(".hard"),
		level_box=document.querySelector(".level_box"),
		car2_num=11, car2_speed=700,
		is_hard=true,
		font_size = parseFloat(getComputedStyle(document.querySelector("html")).fontSize);
	
	music.addEventListener("click",function(){
		music.classList.toggle("mute");
		if(music.classList.contains("mute")){
			Audio.pause();
		}else{
			Audio.play();
		}
	})
	
	//首页点击
	index_run.addEventListener("click",function(){
		wrap.style.display="none";
		rule_box.style.display="block";
	})
	//规则页点击
	rule_start.addEventListener("click",function(){
		rule_box.style.display="none";
		road.style.display="block";
		level_box.style.display="block";
	})
	//等级容易
	easy.addEventListener("click", function() {
		level_box.style.display="none";
		count_down();
	})
	//等级困难
	hard.addEventListener("click", function() {
		level_box.style.display="none";
		car2_num=25;
		car2_speed=350;
		is_hard=false;
		count_down()
	})
	//倒计时函数
	function count_down() {
		timer3 = setInterval(function() {
			daojishi.innerHTML = b--;
			if(b < 0) {
				daojishi.innerHTML = "GO";
				setTimeout(function() {
					left_button.style.display = "block";
					right_button.style.display = "block";
					daojishi.style.display = "none";
					clearInterval(timer3)
					car_startrun();
					late();
				}, 500)
			}
		}, 1000)
	}
	//红色车移动函数
	function car_startrun() {
		is_on = true;
		car.style.bottom = r(80) + "px";
		setTimeout(function() {
			is_on = false;
			bg_run();
			run_start();
		}, 1000)
	}
	//背景移动函数
	function bg_run() {
		if (!is_hard) {
			train.style.transitionDuration=".6s";
		}
		train.style.transform = "translateY(100%)";
		box.style.bottom = "-" + r(2000) + "px";
	}

	train.addEventListener("transitionend", function() {
		train.style.transition = "none";
		train.style.transform = "translateY(0%)";
		getComputedStyle(train).transform;
		train.style.transition = "";
		bg_run();
	})
	//rem转换函数
	function r(a) {
		return a / 100 * font_size;
	}
	//左按钮点击事件
	left_button.addEventListener("touchstart", function() {
		if(!is_on) {
			car.style.transition = "all .15s linear";
			var car_left = parseFloat(getComputedStyle(car).left);
			if(car_left > r(100)) {
				is_on = true;
				car.style.left = (car_left - r(140)) + "px";
			}
			car.addEventListener("transitionend", function() {
				is_on = false;
			})
		}
	})
	//右按钮点击事件
	right_button.addEventListener("touchstart", function() {
		if(!is_on) {
			car.style.transition = "all .15s linear";
			var car_left = parseFloat(getComputedStyle(car).left);
			if(car_left < r(500)) {
				is_on = true;
				car.style.left = (car_left + r(140)) + "px";
			}
			car.addEventListener("transitionend", function() {
				is_on = false;
			})

		}
	})
	//白色车生成运行函数
	function run_start() {
		var a = -1,
			b;
		timer = setInterval(function() {
			car2 = document.createElement("div");
			car2.classList.add("car2");
			road.appendChild(car2);
			car2 = document.querySelectorAll(".car2");
			if (!is_hard) {
				for (var i=0;i<car2.length;i++) {
					car2[i].style.transition="all 3s linear"
				}
			}
			melon();
			function melon() {
				b = Math.floor(Math.random() * 4);
				if(b != a) {
					car2_left = car2_position[b];
					console.log(car2_left)
					a = b;
					car2[index].style.left = r(car2_left) + "px";
					getComputedStyle(car2[index]).top;
					car2[index].style.top = r(2000) + "px";
					index++;
					if(index >= car2_num) {
						clearInterval(timer)
					}
				} else {
					melon();
				}
			}
		}, car2_speed)
	}
	//剩余时间倒计时函数
	function late() {
		late_timer = setInterval(function() {
			later.innerHTML = "剩余时间：" + late_index--;
			if(late_index < 0) {
				clearInterval(late_timer);
				success_box.style.display = "block";
			}
		}, 1000)
	}

	//实时获取刷新
	timer2 = setInterval(function() {
		car2 = document.querySelectorAll(".car2");
		bump(car);
		if(late_index < 0) {
			clearInterval(timer2);
		}
	}, 50)

	//碰撞检测
	function bump(obj) {
		var l1 = obj.offsetLeft,
			r1 = obj.offsetLeft + obj.offsetWidth,
			t1 = obj.offsetTop,
			b1 = obj.offsetTop + obj.offsetHeight;
		for(var i = 0; i < car2.length; i++) {
			var l2 = car2[i].offsetLeft,
				r2 = car2[i].offsetLeft + car2[i].offsetWidth,
				t2 = car2[i].offsetTop,
				b2 = car2[i].offsetTop + car2[i].offsetHeight;
			if(l2 > r1 || t2 > b1 || l1 > r2 || t1 > b2) {

			} else {
				setTimeout(function() {
					fail_box.style.display = "block";
				}, 50)
				clearInterval(timer2);
				clearInterval(late_timer);
				clearInterval(timer);
			}
		}
	}
}